<template>
  <div>
    <div class="content">
      <My-Title :title="Title"></My-Title>

      <div class="m-card-box">
        <div class="m-card">
          <div class="name">{{ 'VIN' }}</div>
          <div class="value">{{ info.vin }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '车籍' }}</div>
          <div class="value">{{ info.vehicleNative }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '出厂日期/车龄' }}</div>
          <div class="value">{{ info.outTime }} / {{ info.carAge }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '品牌-型号' }}</div>
          <div class="value">
            {{ info.vehicleBrand }}
            <span v-if="info.vehicleBrand">-</span>
            {{ info.vehicleModel }}
          </div>
        </div>
        <div class="m-card">
          <div class="name">{{ '车辆类型' }}</div>
          <div class="value">{{ info.vehicleType }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '驱动形式' }}</div>
          <div class="value">{{ info.driveType }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '车辆限载' }}</div>
<!--          字段未找到-->
          <div class="value">{{ info.limitLoad }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '额定载质量' }}</div>
          <div class="value">{{ info.limitLoad }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '车辆外廓' }}</div>
          <div class="value">{{ info.outerLength }}/{{ info.outerWidth }}/{{ info.outerHigh }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '轴数/轮胎数' }}</div>
          <div class="value">{{ info.numAxle }}/{{ info.numTyre }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '轴距/轴荷' }}</div>
          <div class="value">{{ info.wheelbase }}/{{ info.axisLoad }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '轮胎规格' }}</div>
          <div class="value">{{ info.vehicleTyreSize }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '吨位分级' }}</div>
          <div class="value">
            <span v-if="info.isTon10 === '是'">是否 10吨 以下: 是</span>
            <span v-if="info.isTon1020 === '是'">是否 10-20 吨: 是</span>
            <span v-if="info.isTon2030 === '是'">是否 20-30 吨: 是</span>
            <span v-if="info.isTon3040 === '是'">是否 30-40 吨: 是</span>
            <span v-if="info.isTon40 === '是'">是否 40 吨以上: 是</span>
          </div>
        </div>
        <div class="m-card">
          <div class="name">{{ '货箱尺寸' }}</div>
          <div class="value">{{ info.innerLength }}/{{ info.innerWidth }}/{{ info.innerHigh }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '最高速度' }}</div>
          <div class="value">{{ info.highestSpeed }}</div>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
import MyTitle from '@/components/MyModal/title'
import { getCarBaseInfo } from "@/api/largescreen"
// let

export default {
  name: "CarState",
  components: {
    MyTitle
  },
  data() {
    return {
      Title: '登记信息'
    }
  },
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  methods: {
  }
}

</script>

<style scoped lang="scss">

.content {
  position: absolute;
  left: 100px;
  top: 0;
  padding: 25px 20px 20px 40px;
  width: calc(100% - 100px);

  .m-card-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: center;
    height: 705px;
    overflow-x: hidden;
    overflow-y: scroll;

    .m-card {
      width: 246px;
      height: 80px;
      margin-top: 20px;
      background: #050e2399;
      border: 1px solid;
      border-image: linear-gradient(90deg,
        #00000000 0%,
        #00fff411 25%,
        #00fff455 50%,
        #00fff411 75%,
        #00000000 100%) 1;
      text-align: center;

      .name {
        font-size: 21px;
        color: #07c8d1;
        height: 40px;
        line-height: 50px;
        white-space: nowrap;
      }

      .value {
        font-size: 21px;
        color: #f6f6f6;
        height: 40px;
        line-height: 30px;
        white-space: nowrap;
      }
    }
  }
}
</style>
